<template>
  <div>
    <router-view></router-view>
    <!-- 最外面盒子 -->
    <div class="homeList" v-show="show">
    <!-- 头部盒子 -->
    <div class="header">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(s, index) in sliderList" :key="index">
          <img :src="s.picUrl" />
        </van-swipe-item>
      </van-swipe>
      <!-- 导航 -->
      <van-row type="flex" justify="space-around" class="van-navbar">
        <van-col span="2">
          <van-icon name="scan" size="27" color="#fff"
        /></van-col>
        <van-col span="14"
          ><van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            shape="round"
            @click="goToSearch"
        /></van-col>
        <van-col span="2">
          <van-icon name="comment-o" size="27" color="#fff"
        /></van-col>
      </van-row>
    </div>
    <!-- 导航菜单 -->
    <van-grid :column-num="5">
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9Hfx.png"
        text="团购"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9Hfy.png"
        text="一元购"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9Hfz.png"
        text="优惠券"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfA.png"
        text="教育"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfH.png "
        text="旅游"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfG.png"
        text="在线就餐"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfF.png"
        text="庆典"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfE.png"
        text="秒杀"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfD.png"
        text="拍卖"
      />
      <van-grid-item
        icon="https://i.niupic.com/images/2021/12/04/9HfC.png"
        text="服务"
      />
    </van-grid>
      <!--热卖 -->
      <div class="recommend">
        <h3 class="recommend-title">热卖推荐</h3>
        <div class="recommend-img">
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                src="https://img1.baidu.com/it/u=1125743384,426340889&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=361"
              />
              <span class="van-grid-item-text">学医,救不了蒙德人</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img1.baidu.com/it/u=1696150751,1239251038&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=316"
              />
              <span class="van-grid-item-text">卢锅巴</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img2.baidu.com/it/u=874159284,3348534155&fm=26&fmt=auto"
              />
              <span class="van-grid-item-text">为我们项目加分</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img2.baidu.com/it/u=1297683543,2164526526&fm=26&fmt=auto"
              />
              <span class="van-grid-item-text">七七</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img0.baidu.com/it/u=381351419,3998755433&fm=26&fmt=auto"
              />
              <span class="van-grid-item-text">小宝贝,来吧</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img0.baidu.com/it/u=1953357046,1812056502&fm=26&fmt=auto"
              />
              <span class="van-grid-item-text">冲呀芭芭拉</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2201196516-B1E8B9E810D456BD7B8B68CB88250ED1%2F0%3Ffmt%3Djpg%26size%3D146%26h%3D506%26w%3D900%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641109295&t=09c2ca148d2634de8cdac88881048d7e"
              />
              <span class="van-grid-item-text">莫娜</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://img1.baidu.com/it/u=619500624,3249396675&fm=26&fmt=auto"
              />
              <span class="van-grid-item-text">为了提瓦特</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getBannerList} from '../../api/home.js';
export default {
  name: "Home",
  data() {
    return {
      value: "",
      show:true,
      sliderList:[]
    };
  },
  methods:{
     goToSearch(){
            this.$router.push('/search')
            this.show = false
        }
  },
 async mounted(){
    let result = await getBannerList()
    // console.log(result.data);
    this.sliderList = result.data.slider
  }
};
</script>

<style scoped>
/* 搜索框 */
.van-navbar {
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
}
.van-search {
  width: 100%;
  background-color: transparent;
  /* padding: 10px 0; */
  line-height: 70px;
}

.van-cell {
  height: 30px;
}
.van-col--14 {
  width: 80%;
  margin: 15px 0;
}
.van-row--justify-space-around {
  line-height: 75px;
}

/* 轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  /* font-size: 2rem; */
  line-height: 0.1rem;
  text-align: center;
  position: relative;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
/* 导航菜单 */
.recommend-title {
  position: relative;
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  text-align: center;
  font-weight: normal;
  margin: 0;
  color: #5d656b;
}
.recommend-title:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ddd;
  left: 0;
}
.recommend-title:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ddd;
  right: 0;
}
/* 热卖 */
.van-grid-item-text {
  /* display: inline-block; */
  float: left;
  font-size: 16px;
  width: 100%;
  margin: 0;
}
/* 热卖,秒杀 */
.van-count-down {
  float: right;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.van-grid-item-text {
  font-size: 15px;
}
</style>
